<!DOCTYPE html>
<html ng-app="testApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>模态框测试</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    var app = angular.module('testApp',[]);
    app.controller('testController',function($scope){
        $scope.title="新增用户";
        $scope.save = function(){
            alert("save")
        }
    });
    app.directive('smartModal',function(){
        return {
            restrict:'E',
            scope: {
               'title': '=title'
            },
            templateUrl:'http://localhost/myApp/modal.html',
            transclude: true
        }
    });
    </script>
</head>
<body>
<div class="container" ng-controller="testController"
        style="padding-top:10px;">
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">  点击新增</button>
<smart-modal title="title"></smart-modal>
</div>
</body>
</html>